<template>
  <div class="login" :style="'background-image:url('+ Background +');'">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      label-width="0px"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <div class="logo">
        <img :src="logo" class="sidebar-logo">
      </div>
      <h3 class="title">
        与你同行基金后台登录
      </h3>

      <el-form-item prop="username">
        <!--        <span class="svg-container">-->
        <!--          <svg-icon icon-class="user" />-->
        <!--        </span>-->
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="请输入用户名"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
        >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <!--        <span class="svg-container">-->
        <!--          <svg-icon icon-class="password" />-->
        <!--        </span>-->
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="请输入密码"
          name="password"
          tabindex="2"
          auto-complete="off"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>

        <span class="el-input__icon show-pwd-icon" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>

      <!--      <el-form-item prop="code">-->
      <!--        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">-->
      <!--          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
      <!--        </el-input>-->
      <!--        <div class="login-code">-->
      <!--          <img :src="codeUrl" @click="getCode">-->
      <!--        </div>-->
      <!--      </el-form-item>-->

      <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
        记住我
      </el-checkbox>

      <el-button
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="handleLogin"
      >{{ loading===true?'登录中':'登录' }}</el-button>

      <!--      <div class="tips">-->
      <!--        <span style="margin-right:20px;">username: admin</span>-->
      <!--        <span> password: 任意</span>-->
      <!--      </div>-->

    </el-form>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
// import Background1 from '@/assets/images/fund-background1.jpeg'
import Background2 from '@/assets/images/fund-background2.jpeg'
import logo1 from '@/icons/svg/fund-logo1.png'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    return {
      // 背景图片
      Background: Background2,
      // 表单数据
      loginForm: {
        username: 'admin',
        password: '123456',
        rememberMe: false
      },
      // 表单规则
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      // 加载动画
      loading: false,
      // 密码格式
      passwordType: 'password',
      // 重定向
      redirect: undefined,
      // 基金项目Logo
      logo: logo1
    }
  },
  watch: {
    // 处理重定向
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    // 显示密码
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    // 处理登录事件
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          new Promise(resolve => setTimeout(resolve, 2000))
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            // 测试时先睡2s
            setTimeout(() => {
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            }, 1000)
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('提交错误!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg:#283443;
$light_gray:#fff;
$cursor: #fff; // 光标颜色

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

//$bg:#2d3a4b;
$dark_gray:#889aa4; //图标颜色

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #393636;
}

.logo {
  text-align: center;
}

.login-form {
  border-radius: 6px;
  background: rgba(255,255,255,0.9);
  width: 420px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon{
    height: 39px;width: 14px;margin-left: 2px;
  }
  .show-pwd-icon{
    position: absolute;
    right: 10px;
    top: 1px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  display: inline-block;
  height: 38px;
  float: right;
  img{
    cursor: pointer;
    vertical-align:middle
  }
}
</style>
